// JavaScript Document

OpenLayers.Control.FloatingDisplay = 
  OpenLayers.Class(OpenLayers.Control, {

	/** 
     * Property: containerDiv
     * {DOMElement} 
     */
    containerDiv: null,
	
	/** 
     * Property: title
     * {String} 
     */
    title: 'Title',
	
	/** 
     * Property: isVisible
     * {boolean} 
     */
    isVisible: true,
	
	/** 
     * Property: content
     * {DOMElement} 
     */
    content: null,
	contentHTML: '',
	
	/** 
     * Property: onClose
     * {Function} 
     */
    onClose: function(){},
	
	
	/** 
     * SIZE AND POSITIONS
     */
	top: '10px',
	left: '60px',
	right: '',
	width: '180px',
	height: '40px',
	 
    initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
    },
	
	 /**
     * Method: draw
     *
     * Returns:
     * {DOMElement} 
     */  
    draw: function() {
        OpenLayers.Control.prototype.draw.apply(this);

        // create layout divs
        this.loadContents();
   
        return this.div;
    },
	
	/** 
     * Method: ignoreEvent
     * 
     * Parameters:
     * evt - {Event} 
     */
    ignoreEvent: function(evt) {
        OpenLayers.Event.stop(evt);
    },
	
	/** 
     * Method: mouseDown
     *
     * Parameters:
     * evt - {Event}
     */
    mouseDown: function(evt) {
        this.isMouseDown = true;
        this.ignoreEvent(evt);
    },

    /** 
     * Method: mouseUp
     *  
     * Parameters:
     * evt - {Event} 
     */
    mouseUp: function(evt) {
        if (this.isMouseDown) {
            this.isMouseDown = false;
            this.ignoreEvent(evt);
        }
    },

	 /** 
     * Method: loadContents
     *
     */
    loadContents: function() {
//configure main div
		this.div.id = this.id + "_floatingDisplayDiv";
		this.div.className = "floatingDisplay";
		with (this.div.style){
        	position = "absolute";
			width = this.width;
			height = this.height;
		    top = this.top;
			left = this.left;
			rigth = this.right;
			display = (this.isVisible)?"block":"none";
		}
		   
        OpenLayers.Event.observe(this.div, "mouseup", OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
        //OpenLayers.Event.observe(this.div, "click", this.ignoreEvent);
        OpenLayers.Event.observe(this.div, "mousedown", OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
        OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
		
		
		var headerCont = document.createElement("div"); // header contenedor del titulo y del close button
		headerCont.className = "floatingDisplay-header";
  		headerCont.style.textAlign = "left";
		var titleBlock = document.createElement("span");
		titleBlock.className = "floatingDisplay-title";
		titleBlock.innerHTML = this.title;
		var PanelTabImg = document.createElement("div");
		PanelTabImg.className = "PanelTabImg";		
  		headerCont.appendChild(PanelTabImg);
  		PanelTabImg.appendChild(titleBlock);
  		var closeDiv = document.createElement("div");
		closeDiv.className = "floatingDisplay-close-div";
		var closeSpan = document.createElement("span");
		closeSpan.className = "floatingDisplay-close";
		closeSpan.innerHTML = "[x]&nbsp;";
		closeSpan.style.cursor = "pointer";
  		closeDiv.appendChild(closeSpan);
		OpenLayers.Event.observe(closeDiv, "click", 
			OpenLayers.Function.bindAsEventListener(this.hide, this));
  		headerCont.appendChild(closeDiv);
  		this.div.appendChild(headerCont);
		this.content = document.createElement("div"); //contenedor general div
		this.content.className = "floatingDisplay-container";
		this.content.style.height = "90%";
  		this.content.style.overflow = "auto";
  		this.div.appendChild(this.content);
		
	},
	
	/** 
     * Method: addContent
	 * Agrega un elemento HTML al contenido
     *  
     * Parameters:
     * divId - {String}
     */
	addContent: function(HTML) {
		this.contentHTML = HTML;	
		if (this.content!=null)
			this.content.innerHTML = HTML;
	},
	
	/** 
     * Method: hideContainer
     * Oculta el display
     * 
     */
	hide: function(){
		this.isVisible = false;
		this.div.style.display = "none";  
		this.onClose();
	},
	
	/** 
     * Method: showContainer
     * Muestra el display
     * 
     */
	show: function(){
		this.isVisible = true;
		this.div.style.display = "block";
	},

	/** 
     * Method: changeVisibility
     * Oculta o muestra el display, dependiendo del estado actual
     * 
     */
	changeVisibility: function(){
		(this.isVisible)?this.hide():this.show();
	},
	
	CLASS_NAME: "OpenLayers.Control.FloatingDisplay"

});